<template>
  <!-- 定义一个空的view容器，用于放置轮播图 -->
  <view class="">
    <!-- swiper组件用于创建轮播图，设置高度、自动播放、播放间隔和动画持续时间 -->
    <swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <!-- 使用v-for循环渲染轮播图的每一项 -->
      <swiper-item v-for="(item,index) in lunboList">
        <view class="swiper-item">
          <!-- image组件用于显示轮播图的图片 -->
          <image :src="item.url" mode="" style="width: 100%;"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
  <!-- 定义一个view容器，用于放置分类标签 -->
  <view class="category-tabs">
    <!-- 为每个分类创建一个view，设置点击事件和激活状态的样式   使用组件，创建分类标签每个标签都有点击事件和激活状态的样式-->
    <view :class="{'active': currentCategory === 'history'}" @click="currentCategory = 'history'">美丽风景</view>
    <view :class="{'active': currentCategory === 'food'}" @click="currentCategory = 'food'">著名美食</view>
    <view :class="{'active': currentCategory === 'explore'}" @click="currentCategory = 'explore'">金牌向导</view>
    <view :class="{'active': currentCategory === 'specialties'}" @click="currentCategory = 'specialties'">著名特产</view>
  </view>
  <!-- 定义一个view容器，用于根据当前分类显示内容  根据currentCategory的值，使用v-for循环渲染当前分类的每一项内容-->
  <view class="category-content" v-if="currentCategory">
    <!-- 使用v-for循环渲染当前分类的每一项内容 -->
    <view class="item" v-for="(item, index) in currentCategoryData" :key="index"
      @tap="toDetails(item.objectId,item.type)">
      <!-- image组件用于显示内容的图片  每一项内容包含一个图片和一个标题。 -->
      <image :src="item.img" mode="aspectFill" class="item-image"></image>
      <view class="item-info">
        <!-- 显示内容的标题 -->
        <view class="item-title">{{ item.name }}</view>
        <!-- 文字内容可以根据实际情况添加 -->
      </view>
    </view>
  </view>
</template>

<script setup>
  // 导入Vue的响应式API
  import { ref, computed } from 'vue'
  // 导入uni-app的生命周期钩子
  import { onLoad } from '@dcloudio/uni-app'
  // 导入配置文件
  import { CONFIG } from '../../utils/config.js'
  // 导入状态管理库
  import { userStore } from '../../store/userStore';
  let store = userStore()
  // 在页面加载时执行的函数，用于初始化数据
  onLoad(() => {
    getLunbo() // 获取轮播图数据
    gethistorys("1") // 获取风景数据
    getFoods("2") // 获取美食数据
    getExplores("3") // 获取名人数据
    getspecialties("4") // 获取特产数据
  })
  // 定义一个函数，用于跳转到详情页面toDetails函数用于跳转到详情页面。
  function toDetails(id) {
    uni.navigateTo({
      url: "/pages/playinChinaDetails/playinChinaDetails?id=" + id
    })
  }
  // 定义一个响应式变量，用于存储轮播图数据
  let lunboList = ref([])
  // 定义一个异步函数，用于获取轮播图数据
  async function getLunbo() {
    let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/meishilunbo")
    lunboList.value = res.results.map(item => {
      item.url = item.url.trim()
      return item
    })
    console.log(lunboList.value)
  }
  // 定义一个响应式变量，用于存储当前分类  定义响应式变量存储轮播图数据、风景数据、美食数据、名人数据和特产数据。
  const currentCategory = ref('history'); // 默认显示名胜古迹
  // 定义一个计算属性，用于根据当前分类返回对应的数据
  const currentCategoryData = computed(() => {
    switch (currentCategory.value) {
      case 'history':
        return historys.value;
      case 'food':
        return foods.value;
      case 'explore':
        return explores.value;
      case 'specialty':
        return specialties.value;
      default:
        return specialties.value;
    }
  });
  // 定义一个响应式变量，用于存储风景数据定义异步函数getLunbo、gethistorys、getFoods、getExplores和getspecialties用于从服务器获取数据
  let historys = ref([])
  // 定义一个异步函数，用于获取风景数据 
  async function gethistorys(type) {
    let data = {
      "type": type
    }
    let ed = encodeURI(JSON.stringify(data))
    let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
    console.log(res)
    historys.value = res.results
  }

  // 定义一个响应式变量，用于存储美食数据
  let foods = ref([])
  // 定义一个异步函数，用于获取美食数据
  async function getFoods(type) {
    let data = {
      "type": type
    }
    let ed = encodeURI(JSON.stringify(data))
    let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
    console.log(res)
    foods.value = res.results
  }
  // 定义一个响应式变量，用于存储名人数据
  let explores = ref([])
  // 定义一个异步函数，用于获取名人数据
  async function getExplores(type) {
    let data = {
      "type": type
    }
    let ed = encodeURI(JSON.stringify(data))
    let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
    console.log(res)
    explores.value = res.results
  }
  // 定义一个响应式变量，用于存储特产数据
  let specialties = ref([])
  // 定义一个异步函数，用于获取特产数据
  async function getspecialties(type) {
    let data = {
      "type": type
    }
    let ed = encodeURI(JSON.stringify(data))
    let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/ChinaPlayItem?where=" + ed)
    console.log(res)
    specialties.value = res.results
  }
</script>

<style>
  /* 定义分类标签的样式 */
  .category-tabs {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #fa436a;
  }

  .category-tabs view {
    border: 1px solid #fa436a;
    border-radius: 10px;
    background-color: white;
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .category-tabs view.active {
    border: 1px solid #0eb0c9;
    border-radius: 10px;
    background-color: #0eb0c9;
    color: #fff;
    font-style: italic;
    font-weight: bold;
  }

  /* 定义内容项的样式 */
  .category-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
  }

  .item {
    width: 48%;
    /* 两列布局 */
    margin-bottom: 10px;
  }

  .item-image {
    width: 160px;
    height: 200px;
    /* object-fit: cover; */
    border-radius: 8px;
    /* 圆角边框 */
    margin-right: 5px;
  }

  .item-info {
    margin: 5px;
    width: 100%;
    text-align: center;
    padding: 5px;
  }

  .item-title {
    font-size: 16px;
    font-weight: bold;
    margin-right: 25px;
  }
</style>